
<template>
  <div>
    <div align="right">
      <el-button @click="clearFilter">清除所有过滤器</el-button>
      <el-input v-model="search"
                placeholder="请输入查询内容"
                style="width: 200px"
                @blur="searchfor"></el-input>
    </div>

  <el-button @click="clearFilter">清除所有过滤器</el-button>
  <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%">

    <el-table-column
        label="工厂id"
        prop="id"
        width="70">
    </el-table-column>

    <el-table-column
        label="工厂名"
        prop="name"
        width="180">
    </el-table-column>
    <el-table-column
        :formatter="formatter"
        label="工厂简介"
        prop="description">
    </el-table-column>
    <el-table-column
        :filter-method="filterTag"
        :filters="tages"
        filter-placement="bottom-end"
        label="工厂状态"
        prop="statusid"
        width="100"
        >
<!--      添加状态色-->
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.statusid == 2 ? 'danger' : 'success'"
            disable-transitions>
          <span v-for="status in tages" v-show="status.value==scope.row.statusid"  @click="changestatus(scope.row)">
            {{status.text}}
          </span>
        </el-tag>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="150">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">修改
        </el-button>
      </template>
    </el-table-column>

  </el-table>



  <el-pagination
      :page-size="pageSize"
      :total="total"
      background
      layout="prev, pager, next"
      @current-change="page">
  </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 14,
      total: null,
      tages: [{text: '开启', value: 1}, {text: '关闭', value: 2}],
      tableData: null,
      currentPage: 1,
      search: null
    }
  }, created() {
    this.getTableData();
  },
  methods: {
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.description;
    },
    filterTag(value, row) {
      return row.statusid == value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value;
    },
    page() {
      this.currentPage = 1;
      this.getTableData();
    },
    changestatus(row) {
      axios.get('http://localhost:8081/factory/changeStatus/+' + row.id + '/' + row.statusid).then(
          (response) => {
            if (response.data != null) {
              this.success();
              this.getTableData();
            }
          }
      )
    },handleEdit(index, row) {
      this.$router.push({
        path: '/factoryupdate',
        query: {
          id: row.id,
        }
      })
    },
    success() {
      this.$message({
        message: '修改成功!',
        type: 'success'
      });
    },
    searchfor() {
      this.currentPage = 1;
      this.getTableData();
    },
    getTableData() {
      if (this.search != null && this.search != "") {
        axios.get('http://localhost:8081/factory/search/1/' + this.pageSize + "/" + this.search).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        );
      } else if (this.currentPage != 1) {
        axios.get('http://localhost:8081/factory/findAll/' + this.currentPage + '/' + this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        );
      } else {
        axios.get('http://localhost:8081/factory/findAll/1/' + this.pageSize).then(
            (response) => {
              this.tableData = response.data.content;
              this.total = response.data.totalElements;
            }
        );
      };
    },
  }
}
</script>